<template>
    <Modal :mask-closable="false" v-model="visible" :title="title" width="80%">
        <el-table ref="table" :data="material" style="width: 100%" row-key="id" border
            header-cell-style="tableHeaderColor">
            <el-table-column label="物料名称" prop="putMaterialId" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <span>{{ materialData.find(i => i.id === scope.row.putMaterialId)?.materialName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="物料类型" prop="putMaterialId" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <span>{{ materialData.find(i => i.id === scope.row.putMaterialId)?.materialType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="转换比" prop="numPutCompare" min-width="80" show-overflow-tooltip
                align="center"></el-table-column>
            <el-table-column label="需求数量" prop="needNumber" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <Input type="number" v-model="scope.row.needNumber"
                        @on-change="((e) => { needFind(e, scope.row) })"></Input>
                </template>
            </el-table-column>
            <el-table-column label="产出数量" prop="outputNumber" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <span>{{ Number(scope.row.needNumber || 0) * Number(scope.row.numPutCompare || 0) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="储位" prop="storageId" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <span>{{ storageData.find(i => i.id === scope.row.storageId)?.storageName }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit()">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { materialApi, basedataStorageApi } from '@/api/scheduling/dispatchManagement';

export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        material: Array,
    },
    data() {
        return {
            materialData: [],
            storageData: []
        };
    },
    mounted() {

    },
    watch: {
        async visible(newValue, oldValue) {
            if (newValue) {
                this.relevance();
            }
        }
    },
    methods: {
        needFind(e, row) {
            const needData = this.material.map((item) => {
                if (item.putMaterialId === row.putMaterialId) {
                    return {
                        ...item,
                        needNumber: e.target.value
                    }
                }
                return item
            });
            this.material = needData;
            console.log("needFind", e.target.value);
        },
        async relevance() {
            try {
                // 获取物料数据
                const materialRes = await materialApi();
                this.materialData = materialRes.data;

                // 获取存储数据
                const storageRes = await basedataStorageApi();
                this.storageData = storageRes.data;

                // 更新 material 数据
                this.material.forEach(item => {
                    item.materialName = this.materialData.find(i => i.id === item.putMaterialId)?.materialName;
                    item.materialType = this.materialData.find(i => i.id === item.putMaterialId)?.materialType;
                    item.storageName = this.storageData.find(i => i.id === item.storageId)?.storageName;
                });

                console.log(this.material[0], 'this.material[0]', this.materialData);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        },
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit() {
            this.handleAddSubmit(this.material);
        },
    },
};
</script>

<style scoped>
.formList {}
</style>